<template>
  <div>
    <div class="new-song-head">
      <div>
        <button
          class="no-btn mright-10 font-16"
          @click="changeType(t.id)"
          v-for="t in typeList"
          :key="t.id"
          :class="{ area_active: area_active(t.id) }"
        >
          {{ t.name }}
        </button>
      </div>
      <div class="btn-wrap">
        <button class="btn btn-red" @click="playAll">
          <i class="iconfont icon-bofang"></i>
          <span class="btn-text">播放全部</span>
        </button>
        <button class="btn btn-white mleft-12" @click="openAddDialog">
          <i class="el-icon-folder-add"></i>
          <span class="btn-text">收藏全部</span>
        </button>
      </div>
    </div>
    <div>
      <el-skeleton v-show="isloading" :rows="6" animated />
      <InfoList v-show="!isloading" :list="list" class="mtop-10" @clickitem="playMusic">
        <template #index="{ index }"> 
            <div>{{index > 8 ? index + 1 :'0'+ (index + 1)}}</div>
        </template>
        <template #img="{item}">
            <img :src="item.al.picUrl" class=" sub-list mleft-10 " alt="">
        </template>
        <template #title="{item}">
            {{item.name}}
        </template>
        <template #item1="{item}">
            <span style="color:#676767"
            @click.stop="toArtistDetail(item.ar[0].id)"
            >{{item.ar[0].name}}</span>
        </template>
        <template #item2="{item}">
            <span @click.stop="toAlbumDetail(item.al.id)"
             style="color:#676767">{{item.al.name}}</span>
        </template>
        <template #item3="{item}">
            {{ (item.dt/1000) | timeFormat}}
        </template>
     </InfoList>
    </div>
    <addMusic ref="addDialog" :musicList="idList"></addMusic>
  </div>
</template>

<script>
import { getTopMusic } from "@/api/request";
import InfoList from "@/components/list/infoList.vue";
import addMusic from "@/components/addMusic/addMusic.vue"
import { mapState } from "vuex";
export default {
  components: {
    InfoList,addMusic
  },
  data() {
    return {
      typeList: [
        { id: 0, name: "全部" },
        { id: 7, name: "华语" },
        { id: 96, name: "欧美" },
        { id: 8, name: "日本" },
        { id: 16, name: "韩国" },
      ],
      type: 0,
      isloading: true,
      list: [],
    };
  },
  computed: {
    area_active() {
      return function (areaId) {
        return this.type === areaId;
      };
    },
    ...mapState(['musicList']),
    idList(){
      return this.list.map((item) => item.id);
    }
  },
  created() {
    this.getList();
  },
  watch: {
    type() {
      this.getList();
    },
  },
  methods: {
    async getList() {
      if (typeof this.type !== "number") return;
      this.isloading = true;
      const { data: res } = await getTopMusic(this.type);
      if (res.code !== 200) return;
      let list = [];
      res.data.forEach((item) => {
        list.push({
          id: item.id,
          dt: item.duration,
          alia: item.alias,
          al: item.album,
          ar: item.artists,
          name: item.name,
          mv: item.mvid,
          fee: item.fee,
        });
      });
      this.list = Object.freeze(list);
      this.isloading = false;
    },
    changeType(type) {
      this.type = type;
    },
    playMusic(row){
        this.$store.commit('setMusicList',this.list);
        this.$store.commit('setCurrenMusicId',row.id);
        this.$store.commit('setPlayState',true);
        this.getIndex(row.id)
    },
    getIndex(id){
        if(this.musicList.length === 0) return;
        let index = this.musicList.findIndex((item) => item.id = id);
        this.$store.commit('setCurrenIdnex',index);
    },
    playAll() {
        if(this.list.length === 0) return;
        let id = this.list[0].id;
        this.$store.commit('setMusicList',this.list);
        this.$store.commit('setCurrenMusicId',id);
        this.$store.commit('setPlayState',true);
        this.getIndex(id);
    },
    openAddDialog() {
      if(this.idList.length === 0) return this.$message.error('歌曲列表为空');
      this.$refs['addDialog'].openDialog();
    },
    toArtistDetail(id){
        this.$router.push("/artistdetail/" + id);
    },
    toAlbumDetail(id){
        this.$router.push("/albumdetail/" + id);
    },
  },
};
</script>

<style lang="less" scoped>
.new-song-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
.area_active {
  font-weight: bold;
}
.btn-wrap {
  display: flex;
}
.sub-list{
    width: 80px;
    height: 80px;
    border-radius: 4px;
}
</style>